import 'package:flutter/material.dart';
import 'package:x3_base_core/x3_base_core.dart';

class BaseSelectButton extends StatefulWidget {
  /// 按钮高度
  final double height;

  /// 是否选中
  final bool isSelected;

  /// 按钮信息
  final BaseKeyValueModel model;

  /// 点击更改选中回调
  final Function(bool selectResult) onChange;

  /// 默认跟随系统颜色
  final bool followSystemColor;

  /// 已选中的时候是否可以取消选中
  final bool isUncheck;

  const BaseSelectButton({Key key, this.height = 32, this.isSelected = false, @required this.model, @required this.onChange, this.followSystemColor = true, this.isUncheck = true}) : super(key: key);

  @override
  _BaseSelectButtonState createState() => _BaseSelectButtonState();
}

class _BaseSelectButtonState extends State<BaseSelectButton> {
  /// 按钮圆角
  final BorderRadius _borderRadius = BorderRadius.all(Radius.circular(4));

  /// 系统颜色 黑 Color(0xff333333) 白：Color(0xffffffff) 黑白主题选中颜色为Color(0xFFFF004F)
  Color get systemColor => Theme.of(context).primaryColor == Colors.white || Theme.of(context).primaryColor == Color(0xFF333333) ? Color(0xFFFF004F) : Theme.of(context).primaryColor;

  /// 选中背景颜色
  final Color selectedBgColor = Colors.white;

  /// 选中字体
  Color get selectedText => widget.followSystemColor ? systemColor : Color(0xff333333);

  /// 未选中背景颜色
  final Color notSelectedBgColor = Color(0xFFF3F3F3);

  /// 未选中
  final Color notSelectedText = Color(0xff333333);
  bool selectedState;

  /// 背景颜色
  Color get bgColor => selectedState == true ? selectedBgColor : notSelectedBgColor;

  /// 字体颜色
  Color get textColor => selectedState == true ? selectedText : notSelectedText;

  /// 线条颜色
  Color get borderColor => selectedState == true ? selectedText : notSelectedBgColor;

  @override
  void initState() {
    selectedState = widget.isSelected;
    super.initState();
  }

  @override
  void didUpdateWidget(covariant BaseSelectButton oldWidget) {
    if (widget.isSelected != oldWidget.isSelected) {
      selectedState = widget.isSelected;
    }
    super.didUpdateWidget(oldWidget);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: widget.height ?? 0,
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Material(
            borderRadius: _borderRadius,
            color: bgColor,
            child: Container(
              height: 28,
              child: InkWell(onTap: _onChange, borderRadius: _borderRadius, child: _buildButton()),
            ),
          )
        ],
      ),
    );
  }

  Widget _buildButton() {
    return AnimatedContainer(
      decoration: BoxDecoration(border: Border.all(width: 0.8, color: borderColor), borderRadius: _borderRadius),
      constraints: BoxConstraints(minWidth: 56),
      padding: EdgeInsets.symmetric(horizontal: 8),
      alignment: Alignment.center,
      duration: Duration(milliseconds: 300),
      child: _buildText(),
    );
  }

  Widget _buildText() {
    return Text(widget.model.value ?? '', style: TextStyle(fontSize: 13, color: textColor));
  }

  void _onChange() {
    if (selectedState) {
      if (widget.isUncheck) selectedState = false;
    }
    if (!selectedState) selectedState = true;
    if (widget.onChange != null) widget.onChange(selectedState);
  }
}
